<template>
    <div ref="chart" style="width: 600px; height: 400px;"></div>
  </template>
  
  <script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { totalVisual } from "@/api/goodtotal"

export default defineComponent({
  name: '爬虫数据统计',
  setup() {
    const chart = ref<HTMLElement | null>(null);
    const gooddata = ref<number[]>([]);

    const fetchUserData = async () => {
      try {
        const data = await totalVisual();
        gooddata.value = data; // 将数组赋值给 gooddata.value
      } catch (error) {
        console.error('获取商品数据失败:', error);
        // 在这里可以打印错误信息或者抛出错误
        throw new Error('获取商品数据失败');
      }
    };

    onMounted(async () => {
      try {
        await fetchUserData(); // 获取数据
        if (chart.value) {
          const myChart = echarts.init(chart.value);
          const options: echarts.EChartsOption = {
            xAxis: {
              type: 'category',
              data: ['零食', '鞋子', '手机', '衣服', '电脑']
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: gooddata.value.data, // 使用 gooddata.value
              type: 'bar'
            }],
            grid: {  // 设置图表居中
              containLabel: true,
              left: '10%',
              right: '10%',
              bottom: '10%',
              top: '10%',
            },
            tooltip: {  // 配置鼠标悬停提示信息
              trigger: 'axis',
              axisPointer: {
                type: 'shadow' // 使用阴影来指示数据项
              }
            }
          };
          myChart.setOption(options);
        }
      } catch (error) {
        console.error('图表绘制出现错误:', error);
        // 在这里可以打印错误信息或者抛出错误
        throw new Error('图表绘制出现错误');
      }
    });

    return {
      chart
    };
  }
});

  </script>
  